<template>
	<!-- 收藏页面 -->
	<div class="choiceness">
		<el-image style="width: 100%; height: 260px" src="../src/assets/images/bg1.png" />
		<div class="page_content">
			<div class="top_tab df ac">
				<img src="@/assets/images/collect.png" alt=""> 收藏课程
			</div>
			<template v-if="MyFavList.length > 0">
				<div class="df ffrw">
					<xy-course-item v-for="item in MyFavList" :item="item" :key="item.id"></xy-course-item>
				</div>
				<div class="page df jc"> 
					<!-- <el-pagination background  :pager-count="1" layout="prev, pager, next" :default-page-size="pagelist.limit" @current-change="oncurrentChange"  :total="pagelist.total" class="mt-4" /> -->
					<el-pagination background :pager-count="11" ayout="prev, pager, next" :default-page-size="pagelist.limit"
					@current-change="oncurrentChange" :total="pagelist.total" class="mt-4" />
				</div>
			</template>
			<template v-else>
				<xy-empty></xy-empty>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import api from '@/api/api';
import { useUserStore } from '@/stores';


//组件命名-----
defineOptions({ name: "collect-index" })
const store = useUserStore()
const MyFavList = ref<any>([])
/**
 * 获取我的收藏列表
 *
 * @returns Promise<void> 无返回值，但执行异步操作
 */
const pagelist = reactive({
	page: 1,
	limit: 8,
	total: 0,
})
const GetMyFavList = async () => {
	const res = await api.GetMyFavList_API({ userId: store.userInfo.userId, page: pagelist.page, limit: pagelist.limit })
	if (res.code === 0) {
		MyFavList.value = res.data.data
		pagelist.total = res.data.total
	}
}
onMounted(() => {
	GetMyFavList()
})

const oncurrentChange = (e) => {
	console.log("🚀 ~ oncurrentChange ~ e:", e)
	pagelist.page = e
	GetMyFavList()
}


</script>

<style lang="scss" scoped>
.choiceness {
	background-color: $white;
	padding-bottom: 30px;
}

.top_tab {
	padding: 30px 0;
	font-size: 24px;

	img {
		width: 26px;
		object-fit: contain;
		height: 24px;
		margin-right: 10px;
	}
}
</style>
